<template>
  <div>
    <p>docx</p>
    <div style="width: 100%; height: 760px; overflow: auto">
      <VueOfficeDocx :src="url1" :request-options="options" />
    </div>
    <p style="margin-top: 20px">xlsx</p>
    <div style="width: 100%; height: 760px; overflow: auto">
      <VueOfficeExcel :src="url2" style="width: 100%" />
    </div>

    <p style="margin-top: 20px; cursor: pointer" @click="openPdf">pdf</p>
    <div style="width: 100%; height: 760px; overflow: auto">
      <VueOfficePdf :src="url3" />
    </div>

    <p style="margin-top: 20px">img</p>
    <div style="width: 100%; height: 760px; overflow: auto">
      <img :src="url4" width="100%" />
    </div>
  </div>
</template>

<script>
  import VueOfficeDocx from '@vue-office/docx';
  import '@vue-office/docx/lib/index.css';
  import VueOfficeExcel from '@vue-office/excel';
  import '@vue-office/excel/lib/index.css';
  import VueOfficePdf from '@vue-office/pdf';

  import { lsRead } from '@/common/js/ls.js';

  export default {
    components: {
      VueOfficeDocx,
      VueOfficeExcel,
      VueOfficePdf,
    },
    mounted() {},
    methods: {
      openPdf() {
        window.open(
          'http://refuel.com:8086/refuel/api/minio/getFile?bucketName=mahuaide&objectName=2.pdf'
        );
      },
    },
    data() {
      return {
        options: {
          headers: {
            'Preview-Key': lsRead('token'),
          },
        },
        url1: 'http://refuel.com:8086/refuel/api/minio/getFile?bucketName=mahuaide&objectName=1.docx', //设置文档网络地址，可以是相对地址
        url2: 'http://refuel.com:8086/refuel/api/minio/getFile?bucketName=mahuaide&objectName=1.xlsx', //设置文档网络地址，可以是相对地址
        url3: 'http://refuel.com:8086/refuel/api/minio/getFile?bucketName=mahuaide&objectName=2.pdf', //设置文档网络地址，可以是相对地址
        url4: 'http://refuel.com:8086/refuel/api/minio/getFile?bucketName=mahuaide&objectName=1.jpg',
      };
    },
  };
</script>
